<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<view class="wrap">
			<view class="header-panel"></view>
			<view style="display: flex;">
				<view style="width: 100%; ">
					<view class="canWithdraw">当前余额</view>
					<view class="bankGold">¥ {{$store.state.user.userInfo.money}}</view>
				</view>
			</view>

			<view class="page-box">
				<view class="panel ">
					<view class="panel-header">
						<view style="font-size: 32upx;color: #333333;">
							{{swiperItem.id==0?"支付宝":"银行卡"}}
						</view>
					</view>
					<view style="display: flex;flex-direction: row;padding: 20upx;">
						<input disabled="true" type="text" v-model="swiperItem.formData.bankInfo"
							placeholder="未绑定支付宝,请先去绑定"
							style="font-size: 30upx;color: #333333;text-align: left;margin-left: 10upx;width: 80%;" />
					</view>
					<view class="panel-header">
						<view style="font-size: 32upx;color: #333333;">提现金额</view>
						<text style="font-size: 28upx;color: #4fc08d;">
							（注：最少提现金额为{{withdrawConfig.minValue}}，手续费为{{withdrawConfig.fee * 100}}%）
						</text>
					</view>
					<view style="display: flex;flex-direction: row;padding: 20upx;">
						<view style="font-size: 40upx;color: #333333;">¥</view>
						<input type="number" v-model="swiperItem.formData.withdrawValue" placeholder="请输入金额"
							style="font-size: 40upx;color: #333333;text-align: left;margin-left: 10upx;width: 100%;" />
					</view>
					<u-line></u-line>
					<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<view style="display: flex;flex-direction: row;" v-for="(item, index) in quickSeectList"
							:key="index">
							<view>
								<view style="padding: 20upx;" @click="swiperItem.formData.withdrawValue=item.money">
									<view style="padding-top: 40upx;width: 180upx; height: 120upx;background-color: #FFFFFF;
										border:1px solid #4fc08d;border-radius: 10upx;">
										{{ item.money }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-button class="withdraw-btn" @click="withdrawHandle">提现</u-button>
				<view class="tip">提示：每天最多提现{{withdrawConfig.oneDayCount}}次,申请24小时内到账</view>
				<view class="footer">
					<view @click="navTo('./bindCard')">绑定账号</view>
					<view @click="navTo('./moneyRecord')">佣金明细</view>
					<view @click="navTo('./withdrawRecord')">提现记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				withdrawConfig: {}, //提现配置
				swiperItem: {
					id: 0,
					name: '提现到支付宝',
					formData: {
						cardId: '',
						bankInfo: '',
						withdrawValue: '',

					},
				},
				quickSeectList: [{
						money: '10'
					},
					{
						money: '20'
					},
					{
						money: '50'
					},
					{
						money: '100'
					},
					{
						money: '200'
					},
					{
						money: '500'
					}
				],

			};
		},
		//页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			this.getWithdrawConfig()
			this.getInfo()
		},
		methods: {
			getWithdrawConfig() {
				this.$api.api('config.withdraw')
					.then(res => {
						if (res.code == 200) {
							this.withdrawConfig = res.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			getInfo() {
				this.$store.dispatch('getUserInfo').then(res => {
					this.user = res.data;
					if (this.user.userBankCardList) {
						//设置提现通道中用户的银行卡信息
						for (let i = 0; i < this.user.userBankCardList.length; i++) {
							let agUserBankCardDTO = this.user.userBankCardList[i];
							if (this.swiperItem.id == agUserBankCardDTO
								.type) {
								this.swiperItem.formData.bankInfo = agUserBankCardDTO.cardName +
									':' +
									agUserBankCardDTO
									.cardNumber
								this.swiperItem.formData.cardId = agUserBankCardDTO.id
							}
						}
					}

				})

				;
			},
			withdrawHandle() {
				this.$api.api('withdraw.withdraw', this.swiperItem.formData)
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '订单提交成功，等待人工审核！'
							});
							this.getInfo()
							setTimeout(function() {
								uni.navigateTo({
									url: "./withdrawRecord"
								});
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		background: #f8f8f8;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		text-align: center;
		z-index: 0;

		.header-panel {
			width: 100%;
			height: 250upx;
			position: absolute;
			background-color: #4fc08d;
			border-bottom-right-radius: 40upx;
			border-bottom-left-radius: 40upx;
			z-index: -1;
		}

		.canWithdraw {
			font-size: 32upx;
			color: #FFFFFF;
			padding-top: 20upx;
		}

		.bankGold {
			font-size: 40upx;
			color: #FFFFFF;
			padding-top: 20upx;
		}

		.panel {
			margin-left: 40upx;
			margin-right: 40upx;
			background-color: #FFFFFF;
			box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
			margin-top: 20upx;
			border-radius: 20upx;

			.panel-header {
				display: flex;
				flex-direction: row;
				padding: 20upx;
			}
		}

		.withdraw-btn {
			margin: 32upx;
			font-size: 16px;
			background: #4fc08d;
			color: white;
		}

		.footer {
			display: flex;
			width: 100%;
			justify-content: center;

			view {
				color: grey;
				padding-bottom: 30px;
				padding-top: 20upx;
				width: 33%;
			}
		}

		.tip {
			padding: 20upx 60upx;
			font-size: 25upx;
			color: #999999;
		}
	}
</style>
